let CascadeMenu = require("../../../framework/js/aui/components/cascademenu.component");

window.AUI.customCompoents.define("aui-select-cascade-menu", class extends CascadeMenu {
    constructor(name) {
        super(name);
        this.methods = Object.assign(this.methods, {
            getOptions(level, sublevel, option, optionindex) {
                return new Promise(function (resolve, reject) {
                    resolve([{
                        label: "暂无数据",
                        value: window.AUI.EMPTY
                    }]);
                })
            },
            close() {
                var self = this;
                _.forEach(self.levels, function (v, index) {
                    v.disabled = false;
                    v.active = false;
                    v.selectOptionIndex = -1;
                });
            },
            setActiveScrollTop(level) {
                var self = this;
                self.$refs["menu"+level][0].scrollTop = self.calcOptionsHeight(self.$refs["menu"+level][0], self.levels[level].selectOptionIndex)
            },
            calcOptionsHeight(ul, index) {
                var ret = 0;
                $(ul).children().each(function(v){
                    if (v < index) {
                        ret = ret + $(this).outerHeight(true);
                    }
                });
                return ret;
            },
            onSelectEnd(option) {
                var self = this;
                var options = [];
                options = self.levels.map(function (v) {
                    return v.options.filter(function (a, index) {
                        return index == v.selectOptionIndex;
                    })[0];
                });
                self.$emit("selectend", option, options);
                self.close();
            }
        });
    }
    _mounted() {
        var self = this;
        self.anuElement = {};
        for (var i =0; i <3; i++) {
            self.levels.push(self.createLevel());
        }
        setTimeout(function () {
            _.forEach(self.$refs, function (v, k) {
                var index = k.replace("menu", "");
                self.levels[index].paddingTop = parseFloat(window.getComputedStyle(v[0])["padding-top"]);
            });
        }, 0);
    }
});
window.AUI.customCompoents.define("aui-cascade-select", class extends window.AUI.BaseComponent {
    constructor(name) {
        super(name);
        this.methods = {
            select(e) {
                e.preventDefault();
                e.stopPropagation();
                var self = this;
                if (!self.$refs.menu) {
                    return;
                }
                if (!self.$refs.menu.levels[0].active) {
                    self.$refs.menu.levels[0].active = true;
                    if (self.lastOptions && self.lastOptions.length > 0) {
                        _.forEach(self.$refs.menu.levels[0].options, function (v, index) {
                            if (v.value ===  self.lastOptions[0].value){
                                self.$refs.menu.levels[0].selectOptionIndex = index;
                            }
                        });
                        setTimeout(function () {
                            self.$refs.menu.setActiveScrollTop(0);
                        }, 0);
                    }
                } else {
                    if (self.$refs.menu) {
                        self.$refs.menu.close();
                    }
                }
            },
            setOptions(options) {
                var self = this;
                if (self.$refs.menu) {
                    self.$refs.menu.levels[0].options = options;
                }
            },
            setHandleMethods(handler) {
                var self = this;
                if (self.$refs.menu) {
                    self.$refs.menu.getOptions = handler;
                }
            },
            formatLabel(options) {
                return options.map(function (v) {
                    return v.label
                }).join("/");
            },
            onSelectEnd(option, options) {
                var self = this;
                if (option.value != window.AUI.EMPTY) {
                    self.lastOptions = options;
                    self.selectoption = {
                        label: self.formatLabel(options),
                        value: option
                    };
                    self.$emit("change", option.value, options);
                }
            },
            clearMenus(e) {
                var self = this;
                if (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains(self.$el, e.target)) return;
                if (self.$refs.menu) {
                    self.$refs.menu.close();
                }
            }
        };
        this.computed = {
            selectvalue() {
                var self = this;
                if (self.selectoption && self.selectoption.label) {
                    return self.selectoption.label;
                }
                return "";
            }
        }
    }
    _template() {
        var self = this;
        return `
<div class="${self._name}">
    <button type="button" class="btn btn-default" @click="select"><span>{{selectvalue}}</span><span class="caret"></span></button>
    <aui-select-cascade-menu ref="menu" @selectend="onSelectEnd"></aui-select-cascade-menu>
</div> 
`;
    }
    _data() {
        var ret = {};
        ret.selectoption = {
            label: "请选择",
            value: window.AUI.EMPTY
        };
        ret.lastOptions = [];
        return ret;
    }
    _mounted() {
        var self = this;

        $(document)
            .on('click.aui.cascade-select.data-api', self.clearMenus)
    }
});